<template>
  <div class="mx-10 my-10">
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
    <component :is="value"> </component>
    <!-- <div :is="value" title="这是标题" :id="value"></div> -->
    <!-- <Son :type="4">h4-8880008</Son>
    <Son :type="1">h1-8880008</Son> -->
  </div>
</template>
<script>
import comA from '@/components/test/a.vue';
import comB from '@/components/test/b.vue';
import Temp from './temp.vue';
import vMixin from '../vMixin/index.vue';

import Son from './render.js';

export default {
  mixins: [],
  components: { comA, comB, Temp, Son, vMixin },
  data() {
    return {
      options: [
        {
          value: 'comA',
          label: '组件A'
        },
        {
          value: 'comB',
          label: '组件B'
        },
        {
          value: 'Temp',
          label: 'template'
        },
        {
          value: 'vMixin',
          label: 'vMixin'
        }
      ],
      value: 'comA'
    };
  },
  methods: {}
};
</script>
<style scoped></style>
